<template>
  <div class="articles-container">
    <aside class="categories-panel">
      <h2 class="categories-title">Categories</h2>
      <ul class="categories-list">
        <li v-for="category in categories" :key="category" @click="selectCategory(category)" class="category-item">
          <font-awesome-icon :icon="categoryIcon(category)" class="category-icon" />{{ category }}
        </li>
      </ul>
    </aside>
    <section class="article-list-panel">
      <ul class="article-list">
        <li v-for="article in filteredArticles" :key="article.title" @click="openArticle(article)" class="article-item">
          {{ article.title }}
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: ['Java', 'Network Programming'],
      selectedCategory: '',
      articles: [
        { title: 'How Java is developed', category: 'Java' },
        { title: 'The founder of Java', category: 'Java' },
        // Add more articles here
      ],
      filteredArticles: [],
    };
  },
  methods: {
    selectCategory(category) {
      this.selectedCategory = category;
      this.filteredArticles = this.articles.filter(article => article.category === category);
    },
    openArticle(article) {
      // Placeholder for opening an article
      console.log(article.title);
    },
    categoryIcon(category) {
      switch (category) {
        case 'Java': return ['fas', 'coffee']; // Assuming you want to use a coffee icon for Java
        case 'Network Programming': return ['fas', 'network-wired']; // Use a network icon
        default: return ['fas', 'book']; // Default icon
      }
    },
  },
  mounted() {
    this.filteredArticles = this.articles; // Initially show all articles
  }
}
</script>

<style scoped>


.articles-container {
  display: flex;
  /* margin: 20px; */
  background-image: url('../assets/ThreeBody2.jpg'); /* 替换为你的背景图片路径 */
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中 */
  min-height: 100vh; /* 最小高度为视窗高度 */
}

.categories-panel, .article-list-panel {
  background-color: rgba(255, 255, 255, 0); /*白色背景，80% 的不透明度*/
  padding: 20px;
  border-radius: 8px;
}
.categories-panel {
  flex: 1;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  margin-right: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.categories-title {
  margin-bottom: 20px;
  font-size: 24px;
}

.categories-list {
  list-style: none;
  padding: 0;
}

.category-item {
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.category-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.category-icon {
  margin-right: 10px;
}

.article-list-panel {
  flex: 3;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.article-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.article-item {
  cursor: pointer;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
  border: 1px solid #ddd;
}

.article-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
</style>
